<template>
  <div @mouseleave="handleLeave" @mouseenter="handleEnter">
    <span class="rotate" ref="showlabel">
      <i class="iconfont icon-2x1 jj-color" v-if="newDf == 'jj-color'"></i>

      <i
        class="iconfont icon-2x1 lxt-color"
        v-else-if="newDf == 'lxt-color'"
      ></i>

      <i
        class="iconfont icon-2x1 wrong-color"
        v-else-if="newDf == 'wrong-color'"
      ></i>

      <i
        class="iconfont icon-2x1 gpzt-color"
        v-else-if="newDf == 'gpzt-color'"
      ></i>

      <i class="iconfont icon-2x1" v-else> </i>
    </span>
    <div class="label-box" ref="labels" v-if="isLabelBoxShow">
      <span @click="selectJJ">
        <i class="iconfont icon-2x1 jj-color"></i>
      </span>
      <span @click="selectLXT">
        <i class="iconfont icon-2x1 lxt-color"></i>
      </span>
      <span @click="selectWRONG">
        <i class="iconfont icon-2x1 wrong-color"></i>
      </span>
      <span @click="selectGPZT">
        <i class="iconfont icon-2x1 gpzt-color"></i>
      </span>
      <el-tooltip class="item" effect="dark" content="取消收藏" placement="top">
        <span @click="subjectLabelRemove" v-if="newDf.length>1"
          ><i class="iconfont icon-2x1"> </i
        ></span>
      </el-tooltip>
    </div>
  </div>
</template>

<script>
import { sendPost } from "@/utils/http";
import api from "@/config/api";

export default {
  props: ['df', 'id'],
  data () {
    return {
      newDf: '',
      activeIndex: sessionStorage.getItem('activeIndex'),
      isLabelBoxShow: false, // 标签盒子显示隐藏
    }
  },
  computed: {
  },
  mounted () {
    //  console.log("aaaaaaaaaa",this.df);
     this.newDf = this.df
  },
  created () {
    console.log(this.df);
  },
  beforeDestroy () {
  },
  methods: {

    subjectLabelRemove () {
      var that=this
      sendPost(api.subjectLabelRemove, { id: this.id }).then(res => {
        console.log(res);
        this.$msg.success('取消收藏成功！')
        that.newDf =''
      })
    },
    handleEnter () {
      // console.log('enter');
      this.isLabelBoxShow = true
    },
    handleLeave () {
      // console.log('leave');
      this.isLabelBoxShow = false
    },
    selectJJ () {
      this.addLabel("jj-color")
      this.cancleCollect = true
    },
    selectLXT () {
      this.addLabel("lxt-color")
      this.cancleCollect = true
    },
    selectWRONG () {
      this.addLabel("wrong-color")
      this.cancleCollect = true
    },
    selectGPZT () {
      this.addLabel("gpzt-color")
      this.cancleCollect = true
    },
    addLabel (style) {
      // console.log(style);
      var that = this
      sendPost(api.addSubjectLabel, {
        id: that.id,
        style: style
      }).then((res) => {
        console.log(res);
        that.newDf = style
        that.$msg({
          message: '操作成功',
          type: 'success'
        });
      })
    },
  }
}
</script>
<style lang="less" scoped>
.label-box {
  position: absolute;
  top: 2rem;
  right: 0rem;
  margin-top: 1.5rem;
  z-index: 999;
  display: flex;
  flex-direction: column;
  span {
    display: inline-block;
    width: 1.875rem;
    height: 1.25rem;
    line-height: 1.25rem;
    text-align: center;
    margin-bottom: 1rem;
  }
  .iconfont {
    cursor: pointer;
  }
  .iconfont:hover {
    font-size: 1.125rem;
  }
}
.rotate {
  position: absolute;
  right: 0;
  top: 0;
  cursor: pointer;
  .icon-2x1 {
    position: relative;
    cursor: pointer;
  }
}

.jj-bg {
  background: #ff9b4f;
}
.jj-color {
  color: #ff9b4f;
}
.lxt-bg {
  background: #7cc3d6;
}
.lxt-color {
  color: #7cc3d6;
}
.wrong-bg {
  background: #ff5e4e;
}
.wrong-color {
  color: #ff5e4e;
}
.gpzt-bg {
  background: #13bfbf;
}
.gpzt-color {
  color: #13bfbf;
}
.lxcs-bg {
  background: #99bbe4;
}
.lxcs-color {
  color: #99bbe4;
}
.ylx-bg {
  background: #94d0f7;
}
.ylx-color {
  color: #e9edf9;
}
</style>
